<template>
    <div class="page_main">
        <div class="side_box">
            <div class="small_table">
                <div class="list_box">
                    <div class="label">数据中心</div>
                    <div class="value">{{ numeral.dataCenter }}个</div>
                </div>
                <div class="list_box">
                    <div class="label">主机</div>
                    <div class="value">{{ numeral.mainframe }}个</div>
                </div>
                <div class="list_box">
                    <div class="label">CPU</div>
                    <div class="value">{{ numeral.cpu }}个</div>
                </div>
                <div class="list_box">
                    <div class="label">内存</div>
                    <div class="value">{{ numeral.ram }}个</div>
                </div>
            </div>
            <div class="charts_box">
                <div class="charts_top">负载率</div>
                <div ref="charts1" class="charts"></div>
            </div>
            <div class="charts_box">
                <div class="charts_top">使用率</div>
                <div ref="charts2" class="charts"></div>
            </div>
            <div class="charts_box">
                <div class="charts_top">连续数</div>
                <div ref="charts3" class="charts"></div>
            </div>
        </div>
        <div class="center_box">
            <div class="flow_rate">
                <div class="rate_item">
                    <div class="value">
                        <span class="num">{{ numeral.influx }}</span><span class="unit">GB/s</span>
                    </div>
                    <div class="label">流入</div>
                </div>
                <div class="rate_item">
                    <div class="value">
                        <span class="num">{{ numeral.outflow }}</span><span class="unit">GB/s</span>
                    </div>
                    <div class="label">流出</div>
                </div>
                <div class="rate_item">
                    <div class="value">
                        <span class="num">{{ numeral.responsetime }}</span><span class="unit">GB/s</span>
                    </div>
                    <div class="label">响应时间</div>
                </div>
            </div>
            <div class="circle_echarts_box">
                <div class="circle_echarts">
                    <div class="circle_four">
                        <div class="circle_item">
                            <div ref="charts4" class="circle"></div>
                            <div class="value">{{ usagepie1total }}GB</div>
                        </div>
                        <div class="circle_item">
                            <div ref="charts5" class="circle"></div>
                            <div class="value">{{ usagepie2total }}GB</div>
                        </div>
                        <div class="circle_item">
                            <div ref="charts6" class="circle"></div>
                            <div class="value">{{ usagepie3total }}GB</div>
                        </div>
                        <div class="circle_item">
                            <div ref="charts7" class="circle"></div>
                            <div class="value">{{ usagepie4total }}GB</div>
                        </div>
                    </div>
                    <div class="circle_bottom">
                        <div class="health_status">
                            <div class="title">健康度</div>
                            <div ref="charts8" class="charts"></div>
                        </div>
                        <div class="health_status status">
                            <div class="title">状态</div>
                            <div ref="charts9" class="charts"></div>
                        </div>
                    </div>
                </div>
                <div class="right_circle">
                    <div class="title">状态</div>
                    <div ref="charts10" class="right_charts"></div>
                    <div ref="charts11" class="right_charts"></div>
                </div>
            </div>
            <div class="centet_bottom">
                <div class="charts_box">
                    <div class="charts_top">存储</div>
                    <!-- <div ref="charts12" class="charts"></div> -->
                    <div class="charts">
                        <div class="top">100GE</div>
                        <div class="content">
                            <div class="content_left">{{ storageBar.name }}</div>
                            <div class="content_main">
                                <div class="line_box">
                                    <div class="line" :style="{ width: storageBar.usageRate }">
                                        <div class="icon"></div>
                                    </div>
                                    <div class="scale">
                                        <div class="scale_item">
                                            <div class="scale_value">0</div>
                                        </div>
                                        <div class="scale_item">
                                            <div class="scale_value">20</div>
                                        </div>
                                        <div class="scale_item">
                                            <div class="scale_value">40</div>
                                        </div>
                                        <div class="scale_item">
                                            <div class="scale_value">60</div>
                                        </div>
                                        <div class="scale_item">
                                            <div class="scale_value">80</div>
                                        </div>
                                        <div class="scale_item">
                                            <div class="scale_value">100</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="bottom">
                            <div class="label">使用率</div>
                            <div class="value">{{ storageBar.usageRate }}</div>
                        </div>
                    </div>
                </div>
                <div class="charts_box">
                    <div class="charts_top">流量</div>
                    <div ref="charts13" class="charts"></div>
                </div>
            </div>
        </div>
        <div class="side_box">
            <div class="small_table">
                <div class="list_box">
                    <div class="label">读取</div>
                    <div class="value">{{ dataIncrement.num }}个</div>
                </div>
                <div class="list_box">
                    <div class="label">同比增长</div>
                    <div class="value">{{ dataIncrement.yearOnYear }}</div>
                </div>
                <div class="list_box">
                    <div class="label">环比增长</div>
                    <div class="value">{{ dataIncrement.rose }}</div>
                </div>
                <div class="list_box">
                    <div class="label">增长率</div>
                    <div class="value">{{ dataIncrement.radio }}</div>
                </div>
            </div>

            <div class="charts_box">
                <div class="charts_top">数量</div>
                <div ref="charts14" class="charts"></div>
            </div>
            <div class="charts_box">
                <div class="charts_top">IO</div>
                <div ref="charts15" class="charts"></div>
            </div>
            <div class="charts_box">
                <div class="charts_top">吞吐</div>
                <div ref="charts16" class="charts"></div>
            </div>

        </div>
    </div>
</template>

<script>
import "@/mock/index.js";

import api from "@/utils/api/index.js";
import * as echarts from 'echarts';
export default {
    name: 'GeneralView',

    data() {
        return {
            timer: null,
            numeral: {
                cpu: 0,
                dataCenter: 0,//数据中心
                influx: 0,//流入
                mainframe: 0,//主机
                outflow: 0,//流出
                ram: 0,//内存
                responseTime: 0,

            },
            dataIncrement: {
                num: 0,//数量
                radio: 0,//增长率
                rose: 0,//环比增长
                yearOnYear: 0,//	同比增长
            },
            usagepie1total: 0,
            usagepie2total: 0,
            usagepie3total: 0,
            usagepie4total: 0,
            grid: {
                left: '15%',
                right: '10%',
                bottom: '20%',
                top: '10%',
            },
            storageBar: {
                name: '',
                usageRate: '0%',
                value: 0
            },
            myChart1: null,
            myChart2: null,
            myChart3: null,
            myChart4: null,
            myChart5: null,
            myChart6: null,
            myChart7: null,
            myChart8: null,
            myChart9: null,
            myChart10: null,
            myChart11: null,
            myChart13: null,
            myChart14: null,
        }
    },

    mounted() {
        this.initCharts()
        // this.getData();



        // this.initCharts1()
        // this.initCharts2()
        // this.initCharts3()
        // this.initCharts4()
        // this.initCharts5()
        // this.initCharts6()
        // this.initCharts7()
        // this.initCharts8()
        // this.initCharts9()
        // this.initCharts10()
        // this.initCharts11()
        // this.initCharts12()
        // this.initCharts13()
        // this.initCharts14()
        // this.initCharts15()
        // this.initCharts16()
    },
    beforeDestroy() {
        this.clearData();
    },



    methods: {
        initCharts() {
            this.myChart1 = echarts.init(this.$refs.charts1)
            this.myChart2 = echarts.init(this.$refs.charts2)
            this.myChart3 = echarts.init(this.$refs.charts3)
            this.myChart4 = echarts.init(this.$refs.charts4)
            this.myChart5 = echarts.init(this.$refs.charts5)
            this.myChart6 = echarts.init(this.$refs.charts6)
            this.myChart7 = echarts.init(this.$refs.charts7)
            this.myChart8 = echarts.init(this.$refs.charts8)
            this.myChart9 = echarts.init(this.$refs.charts9)
            this.myChart10 = echarts.init(this.$refs.charts10)
            this.myChart11 = echarts.init(this.$refs.charts11)
            this.myChart13 = echarts.init(this.$refs.charts13)
            this.myChart14 = echarts.init(this.$refs.charts14)
            this.myChart15 = echarts.init(this.$refs.charts15)
            this.myChart16 = echarts.init(this.$refs.charts16)
            this.getData()
            this.switper()
        },

    /**
    * 获取数据
    */
        async getData() {
            var that = this;
            await api.getHome({}).then(({ data }) => {
                if (data.code == 200) {
                    console.log("首页", data);
                    // console.log("首页json", JSON.stringify(data));
                    that.setData(data.result);
                }
            });
        },
        /**
  * mock测试数据获 取告警信息测试
  */
        async getMock() {
            var that = this;
            await api.getHomePage({}).then(({ data }) => {
                console.log('首页Mock返回：', data)
                that.setData(data.result);
            });
        },
        //轮询
        switper() {
            if (this.timer) {
                return;
            }
            let looper = () => {
                this.getData();
                // this.getMock()
            };
            this.timer = setInterval(
                looper,
                this.$store.state.echartsAutoTime
            );

        },
        clearData() {
            if (this.timer) {
                clearInterval(this.timer);
                this.timer = null;
            }
        },
        /**
        * 整理格式
        */
        setData(result) {
            var that = this;
            //数字
            if (result.numeral) {
                that.numeral = result.numeral
            }
            // 园区数据增量
            if (result.dataIncrement) {
                that.dataIncrement = result.dataIncrement

            }
            //负载率
            if (result.loadline) {
                var xname1 = []
                var values1 = []
                result.loadline.forEach((item) => {
                    values1.push(item.value)
                    xname1.push(item.name)
                });
                this.initCharts1(xname1, values1);

            }
            //使用率
            if (result.usageline) {
                var xname2 = []
                var values2 = []
                result.usageline.forEach((item) => {
                    values2.push(item.value)
                    xname2.push(item.name)
                });
                this.initCharts2(xname2, values2);
            }
            //连接数
            if (result.connectline) {
                var xname3 = []
                var values3 = []
                result.connectline.forEach((item) => {
                    values3.push(item.value)
                    xname3.push(item.name)
                });
                this.initCharts3(xname3, values3);
            }


            if (result.usagepie1) {
                that.usagepie1total = result.usagepie1[0].value;
                var all1 = result.usagepie1[0].value + result.usagepie1[1].value
                var value1 = parseInt((result.usagepie1[0].value / all1) * 100)
                that.initCharts4(value1)
            }
            if (result.usagepie2) {
                that.usagepie2total = result.usagepie2[0].value;
                var all2 = result.usagepie2[0].value + result.usagepie2[1].value
                var value2 = parseInt((result.usagepie2[0].value / all2) * 100)
                that.initCharts5(value2)
            }
            if (result.usagepie3) {
                that.usagepie3total = result.usagepie3[0].value;
                var all3 = result.usagepie3[0].value + result.usagepie3[1].value
                var value3 = parseInt((result.usagepie3[0].value / all3) * 100)
                that.initCharts6(value3)
            }
            if (result.usagepie4) {
                that.usagepie4total = result.usagepie4[0].value;
                var all4 = result.usagepie4[0].value + result.usagepie4[1].value
                var value4 = parseInt((result.usagepie4[0].value / all4) * 100)
                that.initCharts7(value4)
            }

            //健康
            if (result.health) {
                that.initCharts8(result.health);

            }
            //状态
            if (result.statepie) {
                that.initCharts9(result.statepie);
            }
            //存储
            that.storageBar = result.storageBar

            if (result.enterprise) {
                that.initCharts10(result.enterprise);
            }
            if (result.enterline) {
                var enterLine1 = []
                var enterLine2 = []
                var enterlineName = []
                result.enterline.line1.forEach((item) => {
                    enterLine1.push(item.value)
                });
                result.enterline.line2.forEach((item) => {
                    enterLine2.push(item.value)
                });
                enterlineName = result.enterline.xname
                that.initCharts11(enterLine1, enterLine2, enterlineName);
            }
            //流量、
            if (result.volumebar) {
                var volumebarName = []
                var volumebarValue1 = []
                var volumebarValue2 = []
                result.volumebar.forEach((item) => {
                    volumebarName.push(item.name)
                    volumebarValue1.push(item.value)
                    volumebarValue2.push(item.value2)
                });

                that.initCharts13(volumebarValue1, volumebarValue2, volumebarName);
            }
            //numberline
            if (result.numberline) {

                var numberline1 = []
                var numberlin2 = []
                var numberlin3 = []
                var numberlineNames = []
                var numberlinexName = []
                numberlineNames.push(result.numberline.line1[0].name)
                numberlineNames.push(result.numberline.line2[0].name)
                numberlineNames.push(result.numberline.line3[0].name)

                result.numberline.line1.forEach((item) => {
                    numberline1.push(item.value)
                });
                result.numberline.line2.forEach((item) => {
                    numberlin2.push(item.value)
                });
                result.numberline.line3.forEach((item) => {
                    numberlin3.push(item.value)
                });
                numberlinexName = result.numberline.xname

                that.initCharts14(numberline1, numberlin2, numberlin3, numberlinexName, numberlineNames)
            }

            //IO
            if (result.iobar) {
                var iobar1 = []
                var iobar2 = []
                var iobarName = []
                result.iobar.forEach((item) => {
                    iobarName.push(item.name)
                    iobar1.push(item.value)
                    iobar2.push(item.value2)
                });
                that.initCharts15(iobar1, iobar2, iobarName)
            }

            //吞吐
            if (result.swallow) {
                var swallow1 = []
                var swallow2 = []
                var swallowName = []
                result.swallow.forEach((item) => {
                    swallowName.push(item.name)
                    swallow1.push(item.value)
                    swallow2.push(item.value2)
                });
                that.initCharts16(swallow1, swallow2, swallowName)
            }

        },

        initCharts1(xname, values) {
            var myChart = this.myChart1
            // const dom = this.$refs.charts1
            // var myChart = null
            // myChart = echarts.init(dom)
            // 动态生成 X 轴数据
            let option = {
                grid: this.grid,
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xname,
                    axisLine: {
                        lineStyle: {
                            color: '#FFF'
                        }
                    },
                    axisLabel: {
                        color: '#AAA'
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#FFF'
                        }
                    },
                    axisLabel: {
                        color: '#AAA'
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#666',
                            type: 'dashed'
                        }
                    }
                },
                series: [{
                    data: values,
                    type: 'line',
                    smooth: true,  // 平滑曲线
                    areaStyle: {   // 阴影区域
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(255, 86, 80, 0.6)' },
                            { offset: 1, color: 'rgba(255, 86, 80, 0)' },
                        ])
                    },
                    lineStyle: {
                        color: '#FF5650',  // 折线颜色
                        width: 2
                    },
                    itemStyle: {
                        color: '#FF5650'  // 点的颜色
                    },
                    symbol: 'none',  // 不显示点
                    label: {
                        show: false,
                        position: 'top',
                        color: '#FFF',
                        fontSize: 12,
                        formatter: '{c}'  // 显示数值
                    }
                }],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line',
                        lineStyle: {
                            color: '##FF5650',
                            width: 1
                        }
                    },
                    backgroundColor: 'rgba(0,0,0,0.7)',
                    borderColor: '#00D8FF',
                    borderWidth: 1,
                    textStyle: {
                        color: '#FFF'
                    },
                    formatter: function (params) {
                        return params[0].name + '<br/>负债率: ' + params[0].value;
                    }
                },
                backgroundColor: '#002B4C'  // 背景颜色
            };
            // 设置图表选项并渲染
            myChart.setOption(option);
        },
        initCharts2(xname, values) {
            var myChart = this.myChart2
            // const dom = this.$refs.charts2
            // const myChart = echarts.init(dom)
            // 动态生成 X 轴数据
            let option = {
                grid: this.grid,
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xname,
                    axisLine: {
                        lineStyle: {
                            color: '#FFF'
                        }
                    },
                    axisLabel: {
                        color: '#AAA'
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#FFF'
                        }
                    },
                    axisLabel: {
                        color: '#AAA'
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#666',
                            type: 'dashed'
                        }
                    }
                },
                series: [{
                    data: values,
                    type: 'line',
                    smooth: true,  // 平滑曲线
                    areaStyle: {   // 阴影区域
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(0, 255, 229, 0.6)' },
                            { offset: 1, color: 'rgba(0, 255, 229, 0)' },
                        ])
                    },
                    lineStyle: {
                        color: '#00FFE5',  // 折线颜色
                        width: 2
                    },
                    itemStyle: {
                        color: '#00FFE5'  // 点的颜色
                    },
                    symbol: 'none',  // 不显示点
                    label: {
                        show: false,
                        position: 'top',
                        color: '#FFF',
                        fontSize: 12,
                        formatter: '{c}'  // 显示数值
                    }
                }],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line',
                        lineStyle: {
                            color: '#00FFE5',
                            width: 1
                        }
                    },
                    backgroundColor: 'rgba(0,0,0,0.7)',
                    borderColor: '#00D8FF',
                    borderWidth: 1,
                    textStyle: {
                        color: '#FFF'
                    },
                    formatter: function (params) {
                        return params[0].name + '<br/>使用率: ' + params[0].value;
                    }
                },
                backgroundColor: '#002B4C'  // 背景颜色
            };
            // 设置图表选项并渲染
            myChart.setOption(option);
        },
        initCharts3(xname, values) {
            var myChart = this.myChart3
            // const dom = this.$refs.charts3
            // const myChart = echarts.init(dom)
            // 动态生成 X 轴数据
            let option = {
                grid: this.grid,
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xname,
                    axisLine: {
                        lineStyle: {
                            color: '#FFF'
                        }
                    },
                    axisLabel: {
                        color: '#AAA'
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#FFF'
                        }
                    },
                    axisLabel: {
                        color: '#AAA'
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#666',
                            type: 'dashed'
                        }
                    }
                },
                series: [{
                    data: values,
                    type: 'line',
                    smooth: true,  // 平滑曲线
                    areaStyle: {   // 阴影区域
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(204, 175, 255, 0.6)' },
                            { offset: 1, color: 'rgba(204, 175, 255, 0)' },
                        ])
                    },
                    lineStyle: {
                        color: '#CCAFFF',  // 折线颜色
                        width: 2
                    },
                    itemStyle: {
                        color: '#CCAFFF'  // 点的颜色
                    },
                    symbol: 'none',  // 不显示点
                    label: {
                        show: false,
                        position: 'top',
                        color: '#FFF',
                        fontSize: 12,
                        formatter: '{c}'  // 显示数值
                    }
                }],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line',
                        lineStyle: {
                            color: '#CCAFFF',
                            width: 1
                        }
                    },
                    backgroundColor: 'rgba(0,0,0,0.7)',
                    borderColor: '#00D8FF',
                    borderWidth: 1,
                    textStyle: {
                        color: '#FFF'
                    },
                    formatter: function (params) {
                        return params[0].name + '<br/>连续数: ' + params[0].value;
                    }
                },
                backgroundColor: '#002B4C'  // 背景颜色
            };
            // 设置图表选项并渲染
            myChart.setOption(option);
        },
        initCharts4(value) {
            var myChart = this.myChart4
            // const dom = this.$refs.charts4
            // const myChart = echarts.init(dom)
            // 动态生成 X 轴数据
            let option = {
                series: [
                    {
                        type: 'gauge',
                        radius: '90%', // 边框的半径
                        startAngle: 0,
                        endAngle: 360,
                        pointer: {
                            show: false // 隐藏指针
                        },
                        progress: {
                            show: false // 不显示进度条，只作为圆环边框
                        },
                        axisLine: {
                            lineStyle: {
                                width: 1, // 边框宽度
                                color: [[1, '#00538A']] // 灰色边框
                            }
                        },
                        splitLine: {
                            show: false // 不显示刻度线
                        },
                        axisTick: {
                            show: false // 不显示刻度
                        },
                        axisLabel: {
                            show: false // 不显示刻度标签
                        },
                        detail: {
                            show: false // 不显示具体的数值
                        }
                    },
                    // 内层的环形进度条
                    {
                        type: 'gauge',
                        radius: '80%', // 内层环形进度条的半径
                        startAngle: 90,
                        endAngle: -270,
                        pointer: {
                            show: false // 隐藏指针
                        },
                        progress: {
                            show: true,
                            overlap: false,
                            roundCap: true, // 圆角进度条
                            clip: false,
                            width: 10, //进度条宽度
                            itemStyle: {
                                color: {
                                    colorStops: [
                                        {
                                            offset: 1,
                                            color: '#FCD159'
                                        },
                                    ]
                                }
                            },
                        },
                        axisLine: {
                            lineStyle: {
                                width: 10, // 环形进度条宽度
                                color: [
                                    [1, 'transparent']    // 未激活部分的颜色（灰色）
                                ] // 进度条颜色
                            }
                        },
                        splitLine: {
                            show: false // 不显示刻度线
                        },
                        axisTick: {
                            show: false // 不显示刻度
                        },
                        axisLabel: {
                            show: false // 不显示刻度标签
                        },
                        data: [
                            {
                                value: value, // 当前进度
                                name: '使用率'
                            }
                        ],
                        title: {
                            fontSize: 10,
                            color: '#30BEF4', // 进度数值的颜色
                            offsetCenter: ['0%', '30%'] // 调整标题位置
                        },
                        detail: {
                            valueAnimation: true,
                            formatter: '{value}%', // 显示进度百分比
                            offsetCenter: ['0%', '-10%'], // 调整进度百分比的位置
                            color: '#30BEF4', // 进度数值的颜色
                            fontWeight: 'normal', // 字体加粗
                            fontSize: 14,
                        }
                    }
                ]
            };
            myChart.setOption(option);
        },
        initCharts5(value) {
            var myChart = this.myChart5
            // const dom = this.$refs.charts5
            // const myChart = echarts.init(dom)
            // 动态生成 X 轴数据
            let option = {
                series: [
                    {
                        type: 'gauge',
                        radius: '90%', // 边框的半径
                        startAngle: 0,
                        endAngle: 360,
                        pointer: {
                            show: false // 隐藏指针
                        },
                        progress: {
                            show: false // 不显示进度条，只作为圆环边框
                        },
                        axisLine: {
                            lineStyle: {
                                width: 1, // 边框宽度
                                color: [[1, '#00538A']] // 灰色边框
                            }
                        },
                        splitLine: {
                            show: false // 不显示刻度线
                        },
                        axisTick: {
                            show: false // 不显示刻度
                        },
                        axisLabel: {
                            show: false // 不显示刻度标签
                        },
                        detail: {
                            show: false // 不显示具体的数值
                        }
                    },
                    // 内层的环形进度条
                    {
                        type: 'gauge',
                        radius: '80%', // 内层环形进度条的半径
                        startAngle: 90,
                        endAngle: -270,
                        pointer: {
                            show: false // 隐藏指针
                        },
                        progress: {
                            show: true,
                            overlap: false,
                            roundCap: true, // 圆角进度条
                            clip: false,
                            width: 10, //进度条宽度
                            itemStyle: {
                                color: {
                                    colorStops: [
                                        {
                                            offset: 1,
                                            color: '#DB4963'
                                        },
                                    ]
                                }
                            },
                        },
                        axisLine: {
                            lineStyle: {
                                width: 10, // 环形进度条宽度
                                color: [
                                    [1, 'transparent']    // 未激活部分的颜色（灰色）
                                ] // 进度条颜色
                            }
                        },
                        splitLine: {
                            show: false // 不显示刻度线
                        },
                        axisTick: {
                            show: false // 不显示刻度
                        },
                        axisLabel: {
                            show: false // 不显示刻度标签
                        },
                        data: [
                            {
                                value: value, // 当前进度
                                name: '使用率'
                            }
                        ],
                        title: {
                            fontSize: 10,
                            color: '#30BEF4', // 进度数值的颜色
                            offsetCenter: ['0%', '30%'] // 调整标题位置
                        },
                        detail: {
                            valueAnimation: true,
                            formatter: '{value}%', // 显示进度百分比
                            offsetCenter: ['0%', '-10%'], // 调整进度百分比的位置
                            color: '#30BEF4', // 进度数值的颜色
                            fontWeight: 'normal', // 字体加粗
                            fontSize: 14,
                        }
                    }
                ]
            };
            myChart.setOption(option);
        },
        initCharts6(value) {
            var myChart = this.myChart6
            // const dom = this.$refs.charts6
            // const myChart = echarts.init(dom)
            // 动态生成 X 轴数据
            let option = {
                series: [
                    {
                        type: 'gauge',
                        radius: '90%', // 边框的半径
                        startAngle: 0,
                        endAngle: 360,
                        pointer: {
                            show: false // 隐藏指针
                        },
                        progress: {
                            show: false // 不显示进度条，只作为圆环边框
                        },
                        axisLine: {
                            lineStyle: {
                                width: 1, // 边框宽度
                                color: [[1, '#00538A']] // 灰色边框
                            }
                        },
                        splitLine: {
                            show: false // 不显示刻度线
                        },
                        axisTick: {
                            show: false // 不显示刻度
                        },
                        axisLabel: {
                            show: false // 不显示刻度标签
                        },
                        detail: {
                            show: false // 不显示具体的数值
                        }
                    },
                    // 内层的环形进度条
                    {
                        type: 'gauge',
                        radius: '80%', // 内层环形进度条的半径
                        startAngle: 90,
                        endAngle: -270,
                        pointer: {
                            show: false // 隐藏指针
                        },
                        progress: {
                            show: true,
                            overlap: false,
                            roundCap: true, // 圆角进度条
                            clip: false,
                            width: 10, //进度条宽度
                            itemStyle: {
                                color: {
                                    colorStops: [
                                        {
                                            offset: 1,
                                            color: '#9C31C2'
                                        },
                                    ]
                                }
                            },
                        },
                        axisLine: {
                            lineStyle: {
                                width: 10, // 环形进度条宽度
                                color: [
                                    [1, 'transparent']    // 未激活部分的颜色（灰色）
                                ] // 进度条颜色
                            }
                        },
                        splitLine: {
                            show: false // 不显示刻度线
                        },
                        axisTick: {
                            show: false // 不显示刻度
                        },
                        axisLabel: {
                            show: false // 不显示刻度标签
                        },
                        data: [
                            {
                                value: value, // 当前进度
                                name: '使用率'
                            }
                        ],
                        title: {
                            fontSize: 10,
                            color: '#30BEF4', // 进度数值的颜色
                            offsetCenter: ['0%', '30%'] // 调整标题位置
                        },
                        detail: {
                            valueAnimation: true,
                            formatter: '{value}%', // 显示进度百分比
                            offsetCenter: ['0%', '-10%'], // 调整进度百分比的位置
                            color: '#30BEF4', // 进度数值的颜色
                            fontWeight: 'normal', // 字体加粗
                            fontSize: 14,
                        }
                    }
                ]
            };
            myChart.setOption(option);
        },
        initCharts7(value) {
            var myChart = this.myChart7
            // const dom = this.$refs.charts7
            // const myChart = echarts.init(dom)
            // 动态生成 X 轴数据
            let option = {
                series: [
                    {
                        type: 'gauge',
                        radius: '90%', // 边框的半径
                        startAngle: 0,
                        endAngle: 360,
                        pointer: {
                            show: false // 隐藏指针
                        },
                        progress: {
                            show: false // 不显示进度条，只作为圆环边框
                        },
                        axisLine: {
                            lineStyle: {
                                width: 1, // 边框宽度
                                color: [[1, '#00538A']] // 灰色边框
                            }
                        },
                        splitLine: {
                            show: false // 不显示刻度线
                        },
                        axisTick: {
                            show: false // 不显示刻度
                        },
                        axisLabel: {
                            show: false // 不显示刻度标签
                        },
                        detail: {
                            show: false // 不显示具体的数值
                        }
                    },
                    // 内层的环形进度条
                    {
                        type: 'gauge',
                        radius: '80%', // 内层环形进度条的半径
                        startAngle: 90,
                        endAngle: -270,
                        pointer: {
                            show: false // 隐藏指针
                        },
                        progress: {
                            show: true,
                            overlap: false,
                            roundCap: true, // 圆角进度条
                            clip: false,
                            width: 10, //进度条宽度
                            itemStyle: {
                                color: {
                                    colorStops: [
                                        {
                                            offset: 1,
                                            color: '#FFFFFF'
                                        },
                                    ]
                                }
                            },
                        },
                        axisLine: {
                            lineStyle: {
                                width: 10, // 环形进度条宽度
                                color: [
                                    [1, 'transparent']    // 未激活部分的颜色（灰色）
                                ] // 进度条颜色
                            }
                        },
                        splitLine: {
                            show: false // 不显示刻度线
                        },
                        axisTick: {
                            show: false // 不显示刻度
                        },
                        axisLabel: {
                            show: false // 不显示刻度标签
                        },
                        data: [
                            {
                                value: value, // 当前进度
                                name: '使用率'
                            }
                        ],
                        title: {
                            fontSize: 10,
                            color: '#30BEF4', // 进度数值的颜色
                            offsetCenter: ['0%', '30%'] // 调整标题位置
                        },
                        detail: {
                            valueAnimation: true,
                            formatter: '{value}%', // 显示进度百分比
                            offsetCenter: ['0%', '-10%'], // 调整进度百分比的位置
                            color: '#30BEF4', // 进度数值的颜色
                            fontWeight: 'normal', // 字体加粗
                            fontSize: 14,
                        }
                    }
                ]
            };
            myChart.setOption(option);
        },
        initCharts8(health) {
            var myChart = this.myChart8
            // const dom = this.$refs.charts8
            // const myChart = echarts.init(dom)
            var colors = [
                '#DB4963',
                '#FCD159',
                '#16FBE9',
                '#FFFFFF'
            ];
            let option = {
                // 鼠标悬浮的提示
                tooltip: {
                    formatter: '{b} : {c}'
                },
                series: [
                    {
                        type: 'gauge',
                        radius: '95%', // 边框的半径
                        min: health.min, //最大值
                        max: health.max, //最小值
                        startAngle: 200, //仪表盘起始角度。正右手侧为0度，正上方为90度，正左手侧为180度。
                        endAngle: -20, //仪表盘结束角度
                        splitNumber: 4, //仪表盘刻度的分割段数
                        itemStyle: {
                            color: '#000', //颜色
                            shadowColor: 'rgba(0,138,255,0.45)', //阴影颜色
                            shadowBlur: 10, //图形阴影的模糊大小
                            shadowOffsetX: 2, //阴影水平方向上的偏移距离
                            shadowOffsetY: 2 //阴影垂直方向上的偏移距离
                        },
                        progress: {
                            show: true, //是否显示进度条
                            roundCap: false, //是否在两端显示成圆形
                            width: 10, //进度条宽度
                            itemStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0.8,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: colors[3] // 0% 处的颜色
                                        },
                                        {
                                            offset: 0.33,
                                            color: colors[2] // 25% 处的颜色
                                        },
                                        {
                                            offset: 0.66,
                                            color: colors[1] // 50% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: colors[0] // 75% 处的颜色
                                        },
                                    ],
                                    global: false
                                }
                            }
                        },
                        pointer: {
                            show: true, //是否显示指针
                            offsetCenter: [0, '10%'],
                            itemStyle: {
                                color: {
                                    type: 'linear',
                                    x: 1,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: '#FF4D4F' // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: '#F6A328' // 100% 处的颜色
                                        }
                                    ],
                                    global: false // 缺省为 false
                                }
                            }
                        },
                        axisLine: {
                            show: true, //是否显示仪表盘轴线
                            roundCap: false, //是否在两端显示成圆形
                            lineStyle: {
                                width: 10, // 环形进度条宽度
                                color: [
                                    [1, '#1A587E']    // 未激活部分的颜色（灰色）
                                ] // 进度条颜色
                            }
                        },
                        axisTick: {
                            show: false, //是否显示刻度
                            distance: -29,
                            lineStyle: {
                                color: '#fff', // 刻度线颜色
                                width: 1 // 刻度线的粗细（这里设置为4像素）
                            }
                        },
                        splitLine: {
                            show: true, //是否显示分隔线
                            distance: 1,
                            lineStyle: {
                                color: '#fff', // 刻度线颜色
                                width: 1 // 刻度线的粗细（这里设置为4像素）
                            }
                        },
                        axisLabel: {
                            show: true, //是否显示标签
                            distance: 10,
                            color: '#fff', // 刻度标签颜色
                            fontSize: 8 // 标签字体大小
                        },
                        data: [
                            {
                                value: health.value,
                                name: '健康度'
                            }
                        ],
                        anchor: {
                            show: true,
                            showAbove: true,
                            size: 10,
                            itemStyle: {
                                borderWidth: 2
                            }
                        },
                        title: {
                            fontSize: 12,
                            color: '#fff', // 进度数值的颜色
                            offsetCenter: ['0%', '27%'] // 调整标题位置
                        },
                        detail: {
                            valueAnimation: true,
                            formatter: '{value}%', // 显示进度百分比
                            offsetCenter: ['0%', '55%'], // 调整进度百分比的位置
                            color: '#30BEF4', // 进度数值的颜色
                            fontWeight: 'normal', // 字体加粗
                            fontSize: 14,
                        }
                    }
                ],
                graphic: [
                    {
                        type: 'group',
                        left: 'center',
                        bottom: 0, // 图形放在底部
                        children: [
                            {
                                type: 'ring',
                                left: -70, // 调整圆形的位置
                                shape: { cx: 0, cy: 4, r: 6, r0: 3 }, // 圆形的半径r: 10
                                style: { fill: '#DB4963' } // 左侧颜色标识（红色）
                            },
                            {
                                type: 'text',
                                left: -55,
                                style: {
                                    text: '危险',
                                    fill: '#fff', // 标签文字颜色
                                    font: '12px Arial'
                                }
                            },
                            {
                                type: 'ring',
                                left: -25, // 调整圆形的位置
                                shape: { cx: 0, cy: 4, r: 6, r0: 3 }, // 圆形的半径r: 10
                                style: { fill: '#FCD159' } // 左侧颜色标识（红色）
                            },
                            {
                                type: 'text',
                                left: -10,
                                style: {
                                    text: '高危',
                                    fill: '#fff',
                                    font: '14px'
                                }
                            },
                            {
                                type: 'ring',
                                left: 20, // 调整圆形的位置
                                shape: { cx: 0, cy: 4, r: 6, r0: 3 }, // 圆形的半径r: 10
                                style: { fill: '#16FBE9' } // 左侧颜色标识（红色）
                            },
                            {
                                type: 'text',
                                left: 35,
                                style: {
                                    text: '良好',
                                    fill: '#fff',
                                    font: '14px Arial'
                                }
                            },
                            {
                                type: 'ring',
                                left: 65, // 调整圆形的位置
                                shape: { cx: 0, cy: 4, r: 6, r0: 3 }, // 圆形的半径r: 10
                                style: { fill: '#FFFFFF' } // 左侧颜色标识（红色）
                            },
                            {
                                type: 'text',
                                left: 80,
                                style: {
                                    text: '健康',
                                    fill: '#fff',
                                    font: '14px'
                                }
                            }
                        ]
                    }
                ]
            }
            myChart.setOption(option);
        },
        initCharts9(statepie) {
            var myChart = this.myChart9
            // const dom = this.$refs.charts9
            // const myChart = echarts.init(dom)
            // 动态生成 X 轴数据
            let option = {
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        top: '-5%',
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 13,  // 自定义文字的字体大小
                                fontWeight: 'normal',  // 文字加粗
                                formatter: '40%\n1200',  // 自定义文字内容，可以使用换行符 '\n' 
                                color: '#30BEF4'  // 文字颜色
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: statepie[0].value, name: statepie[0].name, itemStyle: { color: '#DB4963' } },  // 红色
                            { value: statepie[1].value, name: statepie[1].name, itemStyle: { color: '#ffffff' } },  // 黄色
                            { value: statepie[2].value, name: statepie[2].name, itemStyle: { color: '#52BAE8' } },  // 蓝色
                        ]
                    }
                ],
                graphic: [
                    {
                        type: 'group',
                        left: 'center',
                        bottom: 0, // 图形放在底部
                        children: [
                            {
                                type: 'ring',
                                left: -80, // 调整圆形的位置
                                shape: { cx: 0, cy: 4, r: 6, r0: 3 }, // 圆形的半径r: 10
                                style: { fill: '#DB4963' } // 左侧颜色标识（红色）
                            },
                            {
                                type: 'text',
                                left: -65,
                                style: {
                                    text: statepie[0].value,
                                    fill: '#fff', // 标签文字颜色
                                    font: '12px Arial'
                                }
                            },
                            {
                                type: 'ring',
                                left: -25, // 调整圆形的位置
                                shape: { cx: 0, cy: 4, r: 6, r0: 3 }, // 圆形的半径r: 10
                                style: { fill: '#fff' } // 左侧颜色标识（红色）
                            },
                            {
                                type: 'text',
                                left: -10,
                                style: {
                                    text: statepie[1].value,
                                    fill: '#fff',
                                    font: '14px'
                                }
                            },
                            {
                                type: 'ring',
                                left: 30, // 调整圆形的位置
                                shape: { cx: 0, cy: 4, r: 6, r0: 3 }, // 圆形的半径r: 10
                                style: { fill: '#52BAE8' } // 左侧颜色标识（红色）
                            },
                            {
                                type: 'text',
                                left: 45,
                                style: {
                                    text: statepie[2].value,
                                    fill: '#fff',
                                    font: '14px Arial'
                                }
                            }
                        ]
                    }
                ]
            }
            myChart.setOption(option);
        },
        initCharts10(enterprise) {
            var myChart = this.myChart10
            // const dom = this.$refs.charts10
            // const myChart = echarts.init(dom)
            // 动态生成 X 轴数据
            let option = {
                color: ['#00c2dc', '#ffbf00', '#7566cb', '#ff5128', '#00d58e', '#ff0d62'],
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 13,  // 自定义文字的字体大小
                                fontWeight: 'normal',  // 文字加粗
                                // formatter: '22%\n私人企业',  // 自定义文字内容，可以使用换行符 '\n' 
                                color: '#30BEF4'  // 文字颜色
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: enterprise
                        // data: [
                        //     { value: enterprise[0].value, name: enterprise[0].name, itemStyle: { color: '#DB4963' } },  // 红色
                        //     { value: enterprise[1].value, name: enterprise[1].name, itemStyle: { color: '#ffffff' } },  // 黄色
                        //     { value: enterprise[2].value, name: enterprise[2].name, itemStyle: { color: '#52BAE8' } },  // 蓝色
                        // ]
                    }
                ]
            }
            myChart.setOption(option);
        },
        initCharts11(enterLine1, enterLine2, enterlineName) {
            var myChart = this.myChart11
            // const dom = this.$refs.charts11
            // const myChart = echarts.init(dom)
            // 动态生成 X 轴数据
            let option = {
                grid: this.grid,
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: enterlineName
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        show: true, // 显示 y 轴网格线
                        lineStyle: {
                            color: 'rgba(255,255,255,0.12)',
                            type: 'dashed' // 将线条样式设置为虚线
                        }
                    }
                },
                series: [
                    {
                        name: 'Email',
                        type: 'line',
                        stack: 'Total',
                        data: enterLine1,
                        itemStyle: {
                            color: '#00FFE5' // 第二条折线的颜色
                        }
                    },
                    {
                        name: 'Union Ads',
                        type: 'line',
                        stack: 'Total',
                        data: enterLine2,
                        itemStyle: {
                            color: '#FF5900' // 第二条折线的颜色
                        }
                    },
                ]
            };
            myChart.setOption(option);
        },
        // initCharts12() {
        //     const dom = this.$refs.charts12
        //     const myChart = echarts.init(dom)
        //     // 动态生成 X 轴数据
        //     let option = {
        //         grid: this.grid,
        //         xAxis: {
        //             type: 'category',
        //             boundaryGap: false,
        //             data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        //         },
        //         yAxis: {
        //             type: 'value',
        //             splitLine: {
        //                 show: true, // 显示 y 轴网格线
        //                 lineStyle: {
        //                     color: 'rgba(255,255,255,0.12)',
        //                     type: 'dashed' // 将线条样式设置为虚线
        //                 }
        //             }
        //         },
        //         series: [
        //             {
        //                 name: 'Email',
        //                 type: 'line',
        //                 stack: 'Total',
        //                 data: [120, 132, 101, 134, 90, 230, 210],
        //                 itemStyle: {
        //                     color: '#00FFE5' // 第二条折线的颜色
        //                 }
        //             },
        //             {
        //                 name: 'Union Ads',
        //                 type: 'line',
        //                 stack: 'Total',
        //                 data: [220, 182, 191, 234, 290, 330, 310],
        //                 itemStyle: {
        //                     color: '#FF5900' // 第二条折线的颜色
        //                 }
        //             },
        //         ]
        //     };
        //     myChart.setOption(option);
        // },
        initCharts13(volumebarValue1, volumebarValue2, volumebarName) {
            var myChart = this.myChart13
            // const dom = this.$refs.charts13
            // const myChart = echarts.init(dom)
            // 动态生成 X 轴数据
            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，默认是直线
                        type: 'shadow'        // 阴影指示器
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    top: '10%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: volumebarName,
                    axisLine: {
                        lineStyle: {
                            color: '#B0C4DE'  // 设置 X 轴的颜色
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#B0C4DE'  // 设置 Y 轴的颜色
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',  // 虚线
                            color: 'rgba(255,255,255,0.2)' // 网格线颜色
                        }
                    }
                },
                series: [
                    {
                        name: 'Category 1',
                        type: 'bar',
                        data: volumebarValue1,
                        itemStyle: {
                            color: '#FFFCCF',  // 第一组柱子的颜色
                            barBorderRadius: [5, 5, 0, 0]
                        },
                        barWidth: '20%',  // 设置柱宽
                    },
                    {
                        name: 'Category 2',
                        type: 'bar',
                        data: volumebarValue2,
                        itemStyle: {
                            color: '#D84B65',  // 第二组柱子的颜色
                            barBorderRadius: [5, 5, 0, 0]
                        },
                        barWidth: '20%',  // 设置柱宽
                    }
                ]
            };
            myChart.setOption(option);
        },
        initCharts14(numberline1, numberline2, numberline3, numberlinexName, numberlineNames) {
            var myChart = this.myChart14
            // const dom = this.$refs.charts14
            // const myChart = echarts.init(dom)
            // 动态生成 X 轴数据
            let option = {
                legend: {
                    data: ['Email', 'Union Ads', 'Video Ads'],
                    textStyle: {
                        color: '#FFFFFF',   // 图例文字颜色
                        fontSize: 14,       // 图例文字大小
                        fontFamily: 'Arial' // 图例字体
                    },
                    icon: 'circle',
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '17%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: numberlinexName,
                    axisLabel: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#B0C4DE' // Y轴颜色
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed', // Y轴虚线
                            color: 'rgba(255,255,255,0.2)'
                        }
                    }
                },
                series: [
                    {
                        name: numberlineNames[0],
                        type: 'line',
                        stack: 'Total',
                        data: numberline1,
                        lineStyle: {
                            type: 'dashed', // 设置为虚线
                        },
                        itemStyle: {
                            color: '#DB4963',  // 自定义图例图标颜色 (橙红色)
                            barBorderRadius: [10, 10, 0, 0]
                        },
                    },
                    {
                        name: numberlineNames[1],
                        type: 'line',
                        stack: 'Total',
                        data: numberline2,
                        lineStyle: {
                            type: 'dashed', // 设置为虚线
                        },
                        itemStyle: {
                            color: '#F0A953',  // 自定义图例图标颜色 (橙红色)
                            barBorderRadius: [10, 10, 0, 0]
                        },
                    },
                    {
                        name: numberlineNames[2],
                        type: 'line',
                        stack: 'Total',
                        data: numberline3,
                        lineStyle: {
                            type: 'dashed', // 设置为虚线
                        },
                        itemStyle: {
                            color: '#52BAE8',  // 自定义图例图标颜色 (橙红色)
                            barBorderRadius: [10, 10, 0, 0]
                        },
                    }
                ]
            };
            myChart.setOption(option);
        },
        initCharts15(iobar1, iobar2, iobarName) {
            var myChart = this.myChart15
            // const dom = this.$refs.charts15
            // const myChart = echarts.init(dom)
            // 动态生成 X 轴数据
            let option = {
                backgroundColor: '#002b4a', // Dark background
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '17%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: iobarName,
                    axisLine: {
                        lineStyle: {
                            color: '#ccc'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#ccc'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#555' // Grid lines color
                        }
                    }
                },
                series: [
                    {
                        name: 'Series 1',
                        type: 'bar',
                        stack: 'total',
                        barWidth: 14, // 设置柱状图宽度
                        itemStyle: {
                            color: '#FFFAB9' // Bottom part of the stacked bar
                        },
                        data: iobar1
                    },
                    {
                        name: 'Series 2',
                        type: 'bar',
                        stack: 'total',
                        barWidth: 14, // 设置柱状图宽度
                        itemStyle: {
                            color: '#F08721' // Top part of the stacked bar
                        },
                        data: iobar2
                    }
                ]
            };
            myChart.setOption(option);
        },
        initCharts16(swallow1, swallow2, swallowName) {
            var myChart = this.myChart16
            // const dom = this.$refs.charts16
            // const myChart = echarts.init(dom)
            // 动态生成 X 轴数据
            let option = {
                backgroundColor: '#002b4a', // Dark background
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '17%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: swallowName,
                    axisLine: {
                        lineStyle: {
                            color: '#ccc'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#ccc'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#555' // Grid lines color
                        }
                    }
                },
                series: [
                    {
                        name: 'Series 1',
                        type: 'bar',
                        stack: 'total',
                        barWidth: 14, // 设置柱状图宽度
                        itemStyle: {
                            color: '#55B7E7' // Bottom part of the stacked bar
                        },
                        data: swallow1
                    },
                    {
                        name: 'Series 2',
                        type: 'bar',
                        stack: 'total',
                        barWidth: 14, // 设置柱状图宽度
                        itemStyle: {
                            color: '#2D63A6' // Top part of the stacked bar
                        },
                        data: swallow2
                    }
                ]
            };
            myChart.setOption(option);
        },
    }
}
</script>
<style scoped lang="scss">
.page_main {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    .side_box {
        width: calc((100% - 52px)/4);
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;

        .small_table {
            align-items: flex-start;
            display: flex;
            width: 100%;
            height: 150px;
            border-radius: 10px 10px 0px 0px;

            .list_box:nth-child(odd) {
                background: #073B62;
            }

            //奇数行
            .list_box:nth-child(even) {
                background: #022E51;
            }

            //奇数行
            .list_box {
                flex: 1;

                .label {
                    box-sizing: border-box;
                    height: 60px;
                    border-bottom: 1px solid #005072;
                    font-weight: 400;
                    font-size: 14px;
                    color: #1A9ACB;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .value {
                    height: 90px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK;
                    font-weight: 400;
                    font-size: 16px;
                    color: #30BEF4;
                }
            }
        }
    }

    .center_box {
        width: calc((100% - 52px)/2);
        height: 100%;
        margin: auto 26px;

        .flow_rate {
            width: 100%;
            height: 194px;
            background: #00538A;
            border-radius: 10px 10px 0px 0px;
            display: flex;
            align-items: center;
            justify-content: center;

            .rate_item {
                flex: 1;
                height: 194px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;

                .value {
                    display: flex;
                    align-items: flex-end;
                    justify-content: center;
                    width: 114px;
                    font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK;
                    font-weight: 400;
                    color: #30BEF4;

                    .num {
                        font-size: 34px;
                        height: 34px;
                    }

                    .unit {
                        font-size: 20px;
                        height: 20px;
                    }
                }

                .label {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 114px;
                    height: 30px;
                    border-radius: 15px;
                    border: 1px solid #1A9ACB;
                    font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
                    font-weight: 400;
                    font-size: 16px;
                    color: #1A9ACB;
                    margin-top: 40px;
                }
            }
        }

        .circle_echarts_box {
            height: calc(100vh - 391px - (100vh - 373px)/3);
            margin-top: 26px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .circle_echarts {
                height: 100%;
                width: 56%;

                .circle_four {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: calc(100% - 26px - (100vh - 373px)/3);
                    background: #022E51;

                    .circle_item {
                        flex: 1;
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;

                        .circle {
                            width: 100%;
                            flex: 1;
                        }

                        .value {
                            padding-bottom: 10px;
                            font-family: Microsoft YaHei, Microsoft YaHei;
                            font-weight: 400;
                            font-size: 14px;
                            color: #30BEF4;
                        }
                    }
                }

                .circle_bottom {
                    height: calc((100vh - 373px)/3);
                    width: 100%;
                    margin-top: 26px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .health_status {
                        width: calc((100% - 26px)/2);
                        background: #022E51;
                        border-radius: 10px 0px 0px 0px;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        flex-direction: column;

                        &.status {
                            border-radius: 0px 10px 0px 0px;
                        }

                        .title {
                            height: 44px;
                            border-bottom: 1px solid #003F5A;
                            font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK;
                            font-weight: 400;
                            font-size: 18px;
                            color: #1A9ACB;
                            display: flex;
                            align-items: center;
                            width: 100%;
                            justify-content: center;
                        }

                        .charts {
                            flex: 1;
                            width: 100%;
                        }
                    }
                }
            }

            .right_circle {
                width: 42%;
                height: 100%;
                background: #022E51;
                border-radius: 10px 10px 0px 0px;
                display: flex;
                flex-direction: column;
                align-items: center;

                .title {
                    height: 44px;
                    border-bottom: 1px solid #003F5A;
                    font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK;
                    font-weight: 400;
                    font-size: 18px;
                    color: #1A9ACB;
                    display: flex;
                    align-items: center;
                    width: 100%;
                    justify-content: center;
                }

                .right_charts {
                    flex: 1;
                    width: 100%;
                }
            }
        }

        .centet_bottom {
            width: 100%;
            height: calc((100vh - 373px)/3);
            margin-top: 26px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .charts_box {
                .charts {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;

                    .top {
                        width: 90%;
                        font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
                        font-weight: 400;
                        font-size: 16px;
                        color: #FFFFFF;
                        text-align: right;
                    }

                    .content {
                        width: 90%;
                        display: flex;
                        align-items: center;

                        .content_left {
                            font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
                            font-weight: 400;
                            font-size: 16px;
                            color: #FFFFFF;
                        }

                        .content_main {
                            flex: 1;
                            margin-left: 10px;

                            .line_box {
                                width: 100%;
                                height: 8px;
                                background: #0B3962;
                                border-radius: 4px;
                                position: relative;

                                .line {
                                    background: #2D63A6;
                                    height: 8px;
                                    border-radius: 4px;
                                    position: relative;

                                    .icon {
                                        width: 10px;
                                        height: 10px;
                                        border-radius: 50%;
                                        border: 5px solid #2D63A6;
                                        position: absolute;
                                        margin: auto;
                                        background: #fff;
                                        top: 0;
                                        bottom: 0;
                                        right: -10px;
                                    }
                                }

                                .scale {
                                    position: absolute;
                                    margin: auto;
                                    width: 100%;
                                    height: 20px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-between;

                                    .scale_item {
                                        width: 2px;
                                        height: 12px;
                                        background: #A0AFC4;
                                        position: relative;

                                        .scale_value {
                                            font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
                                            font-weight: 400;
                                            font-size: 12px;
                                            color: #A0AFC4;
                                            position: absolute;
                                            margin: auto;
                                            bottom: -16px;
                                            left: -10px;
                                            right: 0;
                                            width: 20px;
                                            text-align: center;
                                        }
                                    }
                                }
                            }
                        }
                    }

                    .bottom {
                        width: 90%;
                        display: flex;
                        align-items: center;
                        margin-top: 30px;
                        justify-content: space-between;

                        .label {
                            font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK;
                            font-weight: 400;
                            font-size: 16px;
                            color: #30BEF4;
                        }

                        .value {
                            font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK;
                            font-weight: 400;
                            font-size: 16px;
                            color: #30BEF4;
                        }
                    }
                }
            }
        }
    }
}

.charts_box {
    border-radius: 10px 10px 0px 0px;
    background: #022E51;
    width: calc((100vw - 142px)/4);
    height: calc((100vh - 373px)/3);

    .charts_top {
        border-bottom: 1px solid #003F5A;
        height: 44px;
        font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK;
        font-weight: 400;
        font-size: 18px;
        color: #1A9ACB;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .charts {
        height: calc((100vh - 373px)/3 - 45px);
    }
}
</style>